<template>
	<view class="content">
		<!--监听查看 :cy="cy" :change:cy="ol.receiveName" -->
		<view id="olMap" class="olMap" style="height: 100vh;" @click="ol.emitData" />
	</view>
</template>
<script module="ol" lang="renderjs">
	//视图层renderjs操作，注意此层中不能uniapp提供相关接口。
	// import '../../static/openlayer/v6.6.1-dist/ol.js'不支持此导入方式否则，打包失败
	export default {
		data() {
			return {
				title: 'Hello',
				//打点数据源
				wrnameData:[
					{
						x: '124.684607429589',
						y: '41.1910493642868',
						wrname: '点位测试'
					},
					// {
					// 	x: '120.663390523',
					// 	y: '31.2341793791',
					// 	wrname: '霸道的程序猿'
					// }
				],
				pointLayer:''
			}
		},
		mounted() {
			if (typeof window.ol === 'function') {
				this.initAmap()
			} else {
				const script = document.createElement('script')
				script.src = 'static/js/ol.js'//可以通过此方式导入jquery，echart库
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
			//可以操作节点
			// console.log(document.getElementId('olMap'))
		},
		methods: {
			initAmap() {
				var that = this
				var format='.png';
				var urlType='3';
				var url = 'http://20.17.1.53:8245/';
				if (urlType == "0") {
					url += "{z}/{x}/{y}" + format;
				} else if (urlType == "1") {
					url += "{z}/{y}/{x}" + format;
				} else if (urlType == "2") {
					url += "{z}/{x}/{x}_{y}" + format;
				} else if (urlType == "3") {
					url += "{z}/{x}/{-y}" + format;
				}
				// 打点图标的图层
				this.pointLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						features: []
					})
				})
				
				this.map = new ol.Map({
					layers: [
						// new ol.layer.Image({
						// 	source: new ol.source.ImageStatic({
						// 		url: 'https://scpic1.chinaz.net/Files/pic/pic9/202108/apic34419_s.jpg',
						// 		projection: new ol.proj.Projection({
						// 			code: 'EPSG:3857',
						// 			extent: [0, 0, 786, 968]
						// 		}),
						// 		imageExtent: [0, 0, 786, 968]
						// 	})
						// })
						new ol.layer.Tile({
								// source: new ol.source.XYZ({
								// 	tileUrlFunction: function (coordinate) {
								// 		var x = 'C' + that.zeroFill(coordinate[1], 8, 16);
								// 		var y = 'R' + that.zeroFill(coordinate[2] - 1, 8, 16);
								// 		var z = 'L' + that.zeroFill(coordinate[0], 2, 10);
								// 		return 'http://20.17.1.53:8245/' + coordinate[0] + '/' + coordinate[2] + '/' + coordinate[1] + '.png';//这里可以修改地图路径
								// 	},
								// 	projection: 'EPSG:4326',
								// })
								baseLayer: true,
								preview: '../../../static/img/0.png',
								source: new ol.source.XYZ({
									url: '../../../static/map3/' + 'L{z}/R{y}/C{x}' + '.png',
									tileUrlFunction: function (tileCoord, pixelRatio, projection) {
										if (!tileCoord) {
											return undefined;
										} else {
											var z = tileCoord[0];
											if (z < 10) {
												z = "0" + z;
											}
											var tempX = "00000000" + (tileCoord[1]).toString(16).toUpperCase() ;
											var tempY = "00000000" + (-tileCoord[2] - 1).toString(16).toUpperCase() ;
											return this.getUrls()[0].replace('{x}', tempX.substring(tempX.length - 8))
												.replace('{y}', tempY.substring(tempY.length - 8)).replace('{z}', z)
										
										}
									},
									// url: url,
									projection: ol.proj.get('EPSG:3857'),
								})
								// source: new ol.source.XYZ({
								// 	url:
								// 	  "http://localhost:9190/{z}_{x}_{y}.png",
								//   })
						}),
						// new ol.source.TileImage({
						//   projection:'BD:09',
						//   tileGrid:baiduTileGrid,
						//   tilePixelRatio:2,
						//   tileUrlFunction: function(tileCoord, pixelRatio, proj) {
						//     let z = tileCoord[0];
						//     let x = tileCoord[1];
						//     let y = tileCoord[2];
						//     if (x < 0) {
						//       x = (-x);
						//     }
						//     if (y < 0) {
						//       y = (-y) - 1;  //初始化地图时，由于ol6算法有变，必须如此设置，否则瓦片加进来会看不见或者位置对不上
						//     }
						
						//     // 服务器的瓦片地址
						//     return 'http://localhost:9190/' + z + '/' + x + '/' + y + '.png';
						
						//   }
						// }),
						this.pointLayer,
						// new ol.layer.Tile({
						// 	source: new ol.source.XYZ({
						// 		tileUrlFunction: function (coordinate) {
						// 			return './map/' + coordinate[2] + '_' + coordinate[1] + '_' + coordinate[0] + '.png';//这里可以修改地图路径
						// 		},
						// 		projection: 'EPSG:3857'
						// 	})
						// })
					],
					target: "olMap",
					view: new ol.View({
						projection: 'EPSG:3857',
						center : ol.proj.transform([124.684607429589, 41.1910493642868], 'EPSG:4326', 'EPSG:3857'),
					    zoom: 6,//地图初始层级
					    minZoom: 1,
					}),
					target: 'olMap'
				})
				this.drawPoint()
				this.map.on('click', function(e) {
					 const feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature) {
					  console.log(feature);
					})
				})
				// ol.source.XYZ添加瓦片地图的层
				// let tileLayer = new ol.layer.Tile({
				//     source: new ol.source.XYZ({
				//         tileUrlFunction: function (coordinate) {
				//             return './map/' + coordinate[2] + '_' + coordinate[1] + '_' + coordinate[0] + '.png';//这里可以修改地图路径
				//         },
				//         projection: 'EPSG:3857'
				//     })
				// });
				// this.map.addLayer(tileLayer);//添加到map里面
			},
			zeroFill(num, len, radix) {
			    var str = num.toString(radix || 10);
			    while (str.length < len) {
			        str = "0" + str;
			    }
			    return str;
			},

			/**
			 * 图标文字打点
			 * */
			drawPoint() {
				this.wrnameData.forEach((item, index) => {
					var feature = new ol.Feature({
						geometry: new ol.geom.Point(ol.proj.transform([Number(item.x), Number(item.y)],'EPSG:4326','EPSG:3857')),
						shuxing:'123'
					})
					console.log(Number(item.x), Number(item.y))
					let style = new ol.style.Style({
						image: new ol.style.Icon({
							scale: 0.3,
							src: '../../../static/images/location.png',
							anchor: [0.48, 0.52]
						}),
						text: new ol.style.Text({
							font: 'normal 12px 黑体',
							// // 对其方式
							textAlign: 'center',
							// 基准线
							textBaseline: 'middle',
							offsetY: -35,
							offsetX: 0,
							backgroundFill: new ol.style.Stroke({
								color: 'rgba(0,0,255,0.7)',
							}),
							// 文本填充样式
							fill: new ol.style.Fill({
								color: 'rgba(236,218,20,1)'
							}),
							padding: [5, 5, 5, 5],
							// text: `${item.wrname}`,
						}),
						zindex:100
					})
					feature.setStyle(style);
					this.pointLayer.getSource().addFeature(feature);
				});
			},
			// // 点击renderjs层后发送数据到逻辑层
			emitData(e, ownerVm) {
				// console.log(e)
			},

			// // 接收逻辑层发送的数据
			// receiveName(newValue, oldValue, ownerVm, vm) {
			// 	console.log('newValue', newValue)
			// 	console.log('oldValue', oldValue)
			// 	console.log('ownerVm', ownerVm)
			// 	console.log('vm', vm)
			// },
		}
	}
</script>

<style>
	@import url("@/static/css/ol.css");
	.content {
		width: 100%;
	}

</style>


